<template>
	<view class="page my_bgc">
		<view class="clients-cark fillx fccc" @click="openPage('/pages/dealer/clientList/clientList')">
			<text>{{this.token?clientsCount:0}}</text>
			<text>客户</text>
			<view class="clients-cark-icon iconfont icon-arrow-right"></view>
		</view>
		<view class="order fillx bsp10 t-bb-u">
			<view class="order-title fillx bsp10 frcc">
				<u-section title="客户订单" :show-line="false" color="#e63131" sub-color="#7c7c7c" sub-title="全部" @click="openPage('/pages/order/orderlist/orderlist')"></u-section>
			</view>
			<view class="order-app fillx frsc">
				<view class="order-app-item fccc" v-for="item in order_appList" :key="item.name" @click="toOrderList(item.name)">
					<image class="order-app-item-img" :src="item.picture" mode="widthFix"></image>
					<text>{{item.name}}</text>
				</view>
			</view>
		</view>
		<view class="performance-total fillx bsp10 t-bb-u">
			<view class="performance-total-title fillx bsp10">
				<u-section title="" :show-line="false" color="#e63131" sub-color="#7c7c7c" sub-title="明细" @click="openPage('/pages/dealer/performance/performance?date=')"></u-section>
				<text class="my_center">累计</text>
			</view>
			<view class="performance-total-content fillx frsc" @click="openPage('/pages/dealer/performance/performance?date=')">
				<view class="ha fccc">
					<view class="my_block fillx fccc">
						<u-loading size="50" v-if="isTotalInfoLoading"></u-loading>
						<text class="m_red my_fs" v-if="!isTotalInfoLoading&&!isPullDownRefresh">{{token?self_totalPerformance?self_totalPerformance:0:0}}</text>
						<text>个人总业绩</text>
					</view>
				</view>
				<view class="ha fccc">
					<view class="my_block fillx fccc">
						<u-loading size="50" v-if="isTotalInfoLoading"></u-loading>
						<text class="m_red my_fs" v-if="!isTotalInfoLoading&&!isPullDownRefresh">{{token?team_totalPerformance?team_totalPerformance:0:0}}</text>
						<text>经销商总业绩</text>
					</view>
				</view>
			</view>
		</view>
		<view class="performance-total-month fillx bsp10 t-bb-u">
			<view class="performance-total-month-title fillx bsp10">
				<u-section title="" :show-line="false" color="#e63131" sub-color="#7c7c7c" sub-title="明细" @click="openPage('/pages/dealer/performance/performance?date='+chooseDate)"></u-section>
				<view class="performance-total-month-picker my_center iconfont icon-shangxiajiantou" @click="isShowTimePicker=true">
					{{chooseDate}}
				</view>
			</view>
			<view class="performance-total-month-content fillx frsc" @click="openPage('/pages/dealer/performance/performance?date='+chooseDate)">
				<view class="ha fccc">
					<view class="my_block fillx fccc">
						<u-loading size="50" v-if="isMonthTotalInfoLoading"></u-loading>
						<text class="m_red my_fs" v-if="!isMonthTotalInfoLoading&&!isPullDownRefresh">{{token?self_monthPerformance:0}}</text>
						<text>个人总业绩</text>
					</view>
				</view>
				<view class="ha fccc">
					<view class="my_block fillx fccc">
						<u-loading size="50" v-if="isMonthTotalInfoLoading"></u-loading>
						<text class="m_red my_fs" v-if="!isMonthTotalInfoLoading&&!isPullDownRefresh">{{token?team_monthPerformance:0}}</text>
						<text>经销商总业绩</text>
					</view>
				</view>
			</view>
		</view>
		<u-picker v-model="isShowTimePicker" mode="time" :params="pickerParams" start-year="2019" end-year="2021" @confirm="confirmTime"></u-picker>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'

	export default {
		components: {

		},
		computed: {
			...mapState(['token']),
		},
		data() {
			return {
				/* token:'', */
				show: false,
				clientsCount: 0,
				self_totalPerformance: 0,
				team_totalPerformance: 0,
				isShowTimePicker: false,
				self_monthPerformance: 0,
				team_monthPerformance: 0,
				chooseDate: '',
				pickerParams: {
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false
				},
				order_appList: [{
						name: '待发货',
						picture: '../../../static/member_order_02.png'
					},
					{
						name: '待收货',
						picture: '../../../static/member_order_03.png'
					},
					{
						name: '已完成',
						picture: '../../../static/member_order_01.png'
					},
					{
						name: '已取消',
						picture: '../../../static/member_order_04.png'
					}
				],
				isPullDownRefresh: false,
				isTotalInfoLoading: false,
				isMonthTotalInfoLoading: false,
				isTOLoding: false,
				isLoding_success: false
			}
		},
		methods: {
			...mapMutations(['vuexRequest']),
			changeSwiperCurrent(e) {
				this.current = e.detail.current
			},
			openPage(page) {
				if (!this.token) {
					this.showModal_toLogin()
					return
				}
				page === '' ? uni.showToast({
					title: '功能在完善中，暂未开放',
					icon: 'none'
				}) : uni.navigateTo({
					url: page
				})
			},
			goLogin() {
				uni.navigateTo({
					url: '/pages/login/login/login'
				})
			},
			toOrderList(choose) {
				if (!this.token) {
					this.showModal_toLogin()
					return
				}
				uni.navigateTo({
					url: '/pages/order/orderlist/orderlist?choose=' + choose
				})
			},
			confirmTime(obj) {
				let year = obj.year
				let month = obj.month
				let date = year + '-' + month
				this.chooseDate = date
				if (!this.token) {
					this.showModal_toLogin()
					return
				}
				this.getMonthTotalInfo()
			},
			getTotalInfo() {
				this.isTotalInfoLoading = true
				this.vuexRequest({
					url: '/api/addons/execute?route=agent/count-my&addon=o-s-mall-dist',
					method: 'GET',
					data: {
						'access-token': this.token
					},
					success: (res) => {
						this.clientsCount = res.data.data.count_agent
						this.self_totalPerformance = res.data.data.self
						this.team_totalPerformance = res.data.data.team
						if (this.isTotalInfoLoading) this.isTotalInfoLoading = false
						if (this.isPullDownRefresh) {
							this.isPullDownRefresh = false
							uni.stopPullDownRefresh()
						}
						console.log(res)
					}
				})
			},
			getMonthTotalInfo() {
				this.isMonthTotalInfoLoading = true
				this.vuexRequest({
					url: '/api/addons/execute?route=agent/count-month-my&addon=o-s-mall-dist',
					method: 'GET',
					data: {
						'access-token': this.token,
						'date': this.chooseDate
					},
					success: (res) => {
						this.self_monthPerformance = res.data.data.self_month ? res.data.data.self_month : 0
						this.team_monthPerformance = res.data.data.team_month ? res.data.data.team_month : 0
						if (this.isMonthTotalInfoLoading) this.isMonthTotalInfoLoading = false
						if (this.isPullDownRefresh) {
							this.isPullDownRefresh = false
							uni.stopPullDownRefresh()
						}
						console.log(res)
					}
				})
			},
			showModal_toLogin(tips = '是否前往登录') {
				uni.showModal({
					title: '登录提示',
					content: tips,
					success: (res) => {
						if (res.confirm) {
							this.goLogin()
						} else if (res.cancel) {
							if (this.isPullDownRefresh) {
								this.isPullDownRefresh = false
								uni.stopPullDownRefresh()
							}
						}
					}
				})
			},
		},
		watch: {

		},
		onLoad() {
			let year = (new Date()).getFullYear()
			let month = (new Date()).getMonth() + 1
			this.chooseDate = year + '-' + (month > 10 ? month : '0' + month)
		},
		onShow() {
			if (this.isPullDownRefresh) uni.stopPullDownRefresh()
			if (this.token) {
				this.getTotalInfo()
				this.getMonthTotalInfo()
			} else {
				//this.showModal_toLogin()
			}
		},
		onPullDownRefresh() {
			this.isPullDownRefresh = true
			if (this.token) {
				this.getTotalInfo()
				this.getMonthTotalInfo()
			} else {
				this.showModal_toLogin()
			}
		},
		onTabItemTap(obj) {
			//console.log(obj)
		},
		mounted() {

		}
	}
</script>

<style scoped>
	/*-----------------页面统一样式-----------------*/
	.my_bgc {
		background-color: transparent;
	}

	.my_center {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.m_red {
		color: #d9001b;
	}
	
	.my_fs{
		font-size: 30rpx;
		font-weight: bold;
	}

	.my_block {
		position: relative;
		width: 80%;
		padding: 30rpx 0;
		background-color: rgba(240, 240, 240,.5);
		border-radius: 3vw;
		border: 2rpx solid rgba(240, 240, 240, .8);
		box-shadow: 0 10rpx 30rpx -10rpx rgba(0, 0, 0, .4);
	}

	/*--------------------分割线--------------------*/
	.clients-cark {
		box-sizing: border-box;
		padding: 40rpx 0;
		position: relative;
		color: white;
		background-color: #e4475a;
	}

	.clients-cark-icon {
		position: absolute;
		top: 50%;
		right: 20rpx;
		transform: translateY(-50%);
	}

	.order {
		padding: 0 0 20rpx 0;
	}

	.order-title {
		padding: 20rpx;

	}

	.order-app-item {
		width: 25vw;
		height: auto;
	}

	.order-app-item-img {
		width: 8vw;
		height: auto;
		border-radius: 3vw;
	}

	.performance-total,
	.performance-total-month {
		padding: 0 0 20rpx 0;
	}

	.performance-total-title,
	.performance-total-month-title {
		padding: 20rpx;
		position: relative;
		color: rgba(0, 0, 0, .5);
	}

	.performance-total-content,
	.performance-total-month-content {
		color: rgba(0, 0, 0, .5);
		padding: 20rpx 0;
	}

	.performance-total-month-picker {
		padding: 2rpx 10rpx;
		background-color: #e9e9e9;
		border-radius: 10rpx;
	}
</style>
